<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理</title>
    <link rel="stylesheet" href="./public/layui/css/layui.css">
  
</head>

<body>
    <div style="padding: 16px;">
        <div class="layui-card">
            <div class="layui-card-body ">
                <form class="layui-form layui-col-space5">
                    <div class="layui-inline layui-show-xs-block">
                        <input type="text" id="feedback" name="feedback" placeholder="请输入反馈名称" autocomplete="off"
                            class="layui-input">
                    </div>
                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn" type="button" id="search">
                            <i class="layui-icon">&#xe615;</i></button>
                    </div>
                </form>
            </div>
        </div>
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
    <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="delCheck">删除选中</button>
    </div>
  </script>
    <script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
      <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="del">删除</a>
      <!-- <a class="layui-btn layui-btn-xs  layui-bg-black"  lay-event="more">
        更多 
        <i class="layui-icon layui-icon-down"></i>
      </a> -->
    </div>
  </script>
    <{include file="common/bottom.html" }>
        <script>
       
            layui.use(function () {
                var table = layui.table;
                var dropdown = layui.dropdown;
                var laydate = layui.laydate;
                var leyer = layui.leyer;
                $ = layui.$;

                //执行一个laydate实例
                laydate.render({
                    elem: '#start' //指定元素
                });

                //执行一个laydate实例
                laydate.render({
                    elem: '#end' //指定元素
                });
                // 创建渲染实例
                table.render({
                    elem: '#test',
                    url: '?p=admin&c=feedback&a=list', // 此处为静态模拟数据，实际使用时需换成真实接口
                    toolbar: '#toolbarDemo',
                    parseData: function (res) {
                        if (res.code == 0) {
                             layer.msg(res.msg)
                             return false
                        }
                        return {
                            "code": 0, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": 0, //解析数据长度
                            "data": res.data //解析数据列表
                        };
                    },
                    defaultToolbar: ['filter', 'exports', 'print', { // 右上角工具图标
                        title: '提示',
                        layEvent: 'LAYTABLE_TIPS',
                        icon: 'layui-icon-tips',
                        onClick: function (obj) { // 2.9.12+
                            layer.alert('自定义工具栏图标按钮');
                        }
                    }],
                    height: 'full-35', // 最大高度减去其他容器已占有的高度差
                    css: [ // 重设当前表格样式
                        '.layui-table-tool-temp{padding-right: 145px;}'
                    ].join(''),
                    cellMinWidth: 80,
                    totalRow: true, // 开启合计行
                    page: true,
                    cols: [[
                        { type: 'checkbox' },
                        { field: 'id', width: 80, title: 'ID', sort: true },
                        { field: 'user_id', width: 80, title: '反馈用户ID' },
                        {
                            field: 'content', width: 150, title: '内容'
                        },
                        { field: 'create_time', title: '反馈时间', width: 120 },
                        { title: '操作', width: 134, minWidth: 125, templet: '#toolDemo' }
                    ]],
                    done: function () {
                        var id = this.id;
                        // 下拉按钮测试
                        dropdown.render({
                            elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                            data: [{
                                id: 'add',
                                title: '添加'
                            }, {
                                id: 'update',
                                title: '编辑'
                            }, {
                                id: 'delete',
                                title: '删除'
                            }],
                            // 菜单被点击的事件
                            click: function (obj) {
                                var checkStatus = table.checkStatus(id)
                                var data = checkStatus.data; // 获取选中的数据
                                switch (obj.id) {
                                    case 'add':
                                        layer.open({
                                            title: '添加',
                                            type: 1,
                                            area: ['80%', '80%'],
                                            content: '<div style="padding: 16px;">自定义表单元素</div>'
                                        });
                                        break;
                                    case 'update':
                                        if (data.length !== 1) return layer.msg('请选择一行');
                                        layer.open({
                                            title: '编辑',
                                            type: 1,
                                            area: ['80%', '80%'],
                                            content: '<div style="padding: 16px;">自定义表单元素</div>'
                                        });
                                        break;
                                    case 'delete':
                                        if (data.length === 0) {
                                            return layer.msg('请选择一行');
                                        }
                                        layer.msg('delete event');
                                        break;
                                }
                            }
                        });
                        //    搜索
                        $('#search').click(() => {
                            feedback = $('#feedback').val()
                            table.reload('test', { where: { feedback: feedback } })
                        })
                    },
                    error: function (res, msg) {
                        console.log(res, msg)
                    }
                });

                // 工具栏事件
                table.on('toolbar(test)', function (obj) {
                    var id = obj.config.id;
                    var checkStatus = table.checkStatus(id);
                    var othis = lay(this);
                    switch (obj.event) {
                        case 'add':
                            layer.open({
                                title: '添加反馈',
                                type: 2,
                                area: ['80%', '80%'],
                                content: '?p=index&c=feedback&a=add'
                            });
                            break
                        case 'delCheck':
                            var data = checkStatus.data;
                            id = ''
                            data.forEach(e => {
                                id += e.id + ','
                            });
                            layer.confirm('确定要删除选中吗 ? ', () => {
                                $.get('?p=admin&c=feedback&a=del', { id: id }, (res) => {
                                    if (res.code == 200) {
                                        layer.msg('删除成功')
                                        table.reload('test')
                                    } else {
                                        layer.msg('删除失败')
                                    }
                                }, 'json')
                            })
                            break;
                        case 'getData':
                            var getData = table.getData(id);
                            console.log(getData);
                            layer.alert(layui.util.escape(JSON.stringify(getData)));
                            break;
                    };
                });
                // 表头自定义元素工具事件 --- 2.8.8+
                table.on('colTool(test)', function (obj) {
                    var event = obj.event;
                    console.log(obj);
                    if (event === 'email-tips') {
                        layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
                            title: '当前列属性配置项'
                        });
                    }
                });

                // 触发单元格工具事件
                table.on('tool(test)', function (obj) { // 双击 toolDouble
                    var data = obj.data; // 获得当前行数据
                    // console.log(obj)
                    if (obj.event === 'edit') {
                        layer.open({
                            title: '编辑反馈' + data.feedback_name,
                            type: 2,
                            area: ['300px', '400px'],
                            content: '?p=index&c=feedback&a=edit&id=' + data.id
                        });
                    } else if (obj.event == 'del') {
                        layer.confirm(`确定要删除反馈 < ${data.content} >吗 ?`, () => {
                            $.get('?p=admin&c=feedback&a=del', { id: data.id }, (res) => {
                                if (res.code == 200) {
                                    layer.msg('删除成功')
                                    obj.del()
                                } else {
                                    layer.msg('删除失败')
                                }
                            }, 'json')
                        })
                    }
                });
                // table 滚动时移除内部弹出的元素
                var tableInst = table.getOptions('test');
                tableInst.elem.next().find('.layui-table-main').on('scroll', function () {
                    dropdown.close('dropdown-table-tool');
                });

                // 触发表格复选框选择
                table.on('checkbox(test)', function (obj) {
                    console.log(obj)
                });

                // 触发表格单选框选择
                table.on('radio(test)', function (obj) {
                    console.log(obj)
                });

                // 行单击事件
                table.on('row(test)', function (obj) {
                    //console.log(obj);
                    //layer.closeAll('tips');
                });
                // 行双击事件
                table.on('rowDouble(test)', function (obj) {
                    console.log(obj);
                });

                // 单元格编辑事件
                table.on('edit(test)', function (obj) {
                    var field = obj.field; // 得到字段
                    var value = obj.value; // 得到修改后的值
                    var data = obj.data; // 得到所在行所有键值
                    // 值的校验
                    if (field === 'email') {
                        if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(obj.value)) {
                            layer.tips('输入的邮箱格式不正确，请重新编辑', this, { tips: 1 });
                            return obj.reedit(); // 重新编辑 -- v2.8.0 新增
                        }
                    }
                    // 编辑后续操作，如提交更新请求，以完成真实的数据更新
                    // …
                    layer.msg('编辑成功', { icon: 1 });

                    // 其他更新操作
                    var update = {};
                    update[field] = value;
                    obj.update(update);
                });
            });
        </script>